<template>
  <div>
    <el-card class="box-card">
      <el-form
        ref="selectform"
        :inline="true"
        :model="selectform"
        class="demo-form-inline ManagementClass"
      >
        <el-form-item prop="oneClassName" label="文章标题">
          <el-input
            v-model="selectform.oneClassName"
            placeholder="请输入文章标题"
            prefix-icon="el-icon-search"
            class="AuthorityInput managementBtn"
          />
        </el-form-item>
        <el-form-item prop="title" label="文章作者">
          <el-input
            v-model="selectform.title"
            placeholder="请输入作者"
            prefix-icon="el-icon-search"
            class="AuthorityInput managementBtn"
          />
        </el-form-item>
        <el-form-item>
          <el-button style="margin-left: 0px;" type="primary" @click="selectSubmit('selectform')">查询</el-button>
          <el-button style="margin-left: 2px;" type="info" @click="selectResetForm('selectform')">重置</el-button>
          <el-button style="margin-left: 2px;" type="success" @click="AddSubmitDialog">新增</el-button>
          <el-badge :value="total" class="item" style="margin-left: 2px;">
            <el-button type="warning" size="small" icon="el-icon-document" style="cursor: auto;">文章总数</el-button>
          </el-badge>
        </el-form-item>
      </el-form>
    </el-card>

    <el-row :gutter="24" style="margin-top: 3px" class="articleMangenme" >
      <el-col v-for="(item, index) in tableData" :md="24" :lg="6" :key="index" style="margin: 3px 0px">
        <div style="cursor: pointer;" @click="ArticleManagement(item)">
          <el-card shadow="always">
            <div slot="header" class="clearfix">
              <el-tag type="success" class="itemIs">{{ item.sort }}</el-tag>
              <span>{{ item.title }}</span>
            </div>
            <div slot="header" class="author">
              <el-tag type="success">作者:</el-tag>
              <span>{{ item.author }}</span>
              <span style="margin-left: 10px">创作时间:</span>
              <span>{{ item.createTimeString }}</span>
            </div>
            <div class="text item contenttchhile">
              <span style="margin-left: 10px;color: #409EFF">文章主题:</span>
              <span>{{ item.type }}</span>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>

    <el-drawer
      :visible.sync="drawer"
      :title="modalTitle"
      :close-on-press-escape="true"
      class="drawerbtn"
      direction="rtl"
      size="70%">
      <div class="demo-drawer__content">
        <el-form
          ref="form"
          :model="form"
          :rules="AddRules"
        >
          <el-form-item :label-width="formLabelWidth" prop="title" label="文章标题:">
            <el-input v-model="form.title"/>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" prop="author" label="文章作者:">
            <el-input v-model="form.author"/>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" prop="type" label="文章主题:">
            <el-input v-model="form.type"/>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" prop="sort" label="文章序号:">
            <el-input v-model="form.sort"/>
          </el-form-item>
          <!--富文本开始-->

          <el-form-item :label-width="formLabelWidth" prop="content" label="文章内容:" class="editorClass">
            <Editor :text.sync="form.content"/>
          </el-form-item>
          <!--富文本结束-->
          <el-form-item class="demo-drawer__footer">
            <el-button @click="drawer = false">取 消</el-button>
            <el-button :loading="loading" type="primary" @click="closeDrawer('form')">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
            <el-button type="danger" @click="detele">删除</el-button>
          </el-form-item>
        </el-form>
      </div>

    </el-drawer>

  </div>
</template>

<script>
import { queryAll, addEdit, uptatEdit, deteleEdit } from '@/api/ComprehensiveManagement/ArticleManagement/index'

// --富文本开始--
import Editor from '../commom/index'

// 富文本结束

export default {

// 富文本开始
  components: {
    Editor
  },
  // 富文本结束

  data() {
    return {
      pager: {
        pageSize: 100000000000,
        currentPage: 1,
        totalPage: 0
      },
      tableData: [],
      selectform: {
        oneClassName: '',
        title: ''
      },
      total: '',
      drawer: false,
      loading: false,
      modalTitle: '',
      form: {
        title: '',
        author: '',
        type: '',
        sort: '',
        content: ''
      },
      AddRules: {
        title: [
          {
            required: true,
            message: '请输入文章标题',
            trigger: 'blur'
          }
        ],
        author: [
          {
            required: true,
            message: '请输入文章作者',
            trigger: 'blur'
          }
        ],
        type: [
          {
            required: true,
            message: '请输入文章标签',
            trigger: 'blur'
          }
        ],
        sort: [
          {
            required: true,
            message: '请输入文章序号',
            trigger: 'blur'
          },
          { pattern: /^[0-9]*$/, message: '请输入数字', trigger: 'change' }
        ],
        content: [
          {
            required: true,
            message: '请输入内容',
            trigger: 'blur'
          }
        ]
      },
      formLabelWidth: '86px'
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    getInfo() {
      queryAll(this.parameter()).then(res => {
        this.tableData = res.data.rows
        this.total = res.data.total
      })
    },
    parameter() {
      const obj = {
        current: this.pager.currentPage,
        size: this.pager.pageSize,
        keywordOne: this.selectform.oneClassName,
        keywordTwo: this.selectform.title
      } // 默认列表字段数据
      return obj
    },
    // 搜索
    selectSubmit(formName) {
      this.pager.currentPage = 1
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.getInfo()
        } else {
          return false
        }
      })
    },
    // 搜索重置
    selectResetForm(formName) {
      this.pager.currentPage = 1
      this.$refs[formName].resetFields()
      this.getInfo()
    },
    detele() {
      this.$confirm('您确定要删除吗?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deteleEdit(this.form.id).then(res => {
            this.getInfo()
            this.drawer = false
            this.$message({
              message: res.data,
              type: 'success'
            })
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 新增弹框
    AddSubmitDialog() {
      this.drawer = true
      this.modalTitle = '新增文章'
      this.$nextTick(() => {
        this.$refs.form.resetFields()
        for (var key in this.form) {
          if (this.form.hasOwnProperty(key)) {
            this.form[key] = ''
          }
        }
      })
    },
    // 确定按钮
    closeDrawer(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.loading = true
          if (this.modalTitle === '新增文章') {
            addEdit(this.form).then(res => {
              this.getInfo()
              this.$refs[formName].resetFields('from')
              this.drawer = false
              this.$message({
                type: 'success',
                message: '新增成功'
              })
              this.loading = true
            })
          }
          if (this.modalTitle === '编辑文章') {
            uptatEdit(this.form).then(res => {
              this.getInfo()
              this.$refs[formName].resetFields('from')
              this.drawer = false
              this.$message({
                type: 'success',
                message: '编辑成功'
              })
            })
            this.loading = false
          }
        } else {
          return false
        }
      })
    },
    // 编辑
    ArticleManagement(e) {
      this.modalTitle = '编辑文章'
      this.drawer = true
      this.$nextTick(() => {
        this.$refs.form.resetFields()
        for (var key in this.form) {
          if (this.form.hasOwnProperty(key)) {
            this.form[key] = ''
          }
        }
        this.form.content = e.content
        this.form.title = e.title
        this.form.author = e.author
        this.form.type = e.type
        this.form.sort = e.sort
        this.form.id = e.id
      })
    }
  }
}
</script>

<style scoped>

</style>
